<template>
  <div class="schedule-table">
    <el-table
      :data="tableDataThis"
      size="mini"
      :row-key='getRowKeys'
      highlight-current-row
      :expand-row-keys="rowKeyArr"
      @row-click="rowClick"
      style="width: 100%">
      <el-table-column type="expand">
        <template scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <div v-for="(item, index) in props.row.SchedulesList" :key="index" class="schedule-expend clearfix">
              <div class="schedule-expend-div">
                <el-form-item class="el-item">
                  <b style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100px;display: inline-block">{{item.DisplayName}}</b>
                </el-form-item>
                <el-form-item :label="$t('channelsettings.schedule4')" class="el-order">
                  <span>{{item.Order}}</span>
                </el-form-item>
                <el-form-item :label="$t('channelsettings.schedule5')">
                  <span>{{item.UpdateTime}}</span>
                </el-form-item>
              </div>
              <div style="text-align: right">
                <el-button @click="updata(item)" type="text" size="small" class="updata">{{$t('channelsettings.schedule6')}}</el-button>
                <el-button type="text" @click="del(item)" size="small" class="del">{{$t('public.delete')}}</el-button>
              </div>
            </div>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('channelsettings.ServiceNumber')"
        prop="Exten">
      </el-table-column>
      <el-table-column
              label="PBX"
              prop="PBX">
      </el-table-column>
      <el-table-column
        :label="$t('public.operate')">
        <template scope="scope">
          <el-button @click="add(scope.row)" type="text" size="small" class="updata">{{$t('channelsettings.schedule3')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    name: 'scheduleTab',
    data () {
      return {
        rowKeyArr: []
      }
    },
    props: {
      tableData: {
        type: Array,
        default: []
      }
    },
    methods: {
      getRowKeys (row) {
        return row.Exten
      },
      rowClick (row) {
        this.rowKeyArr = [row.Exten]
      },
      add (val) {
        this.$emit('add', val)
      },
      updata (val) {
        this.$emit('updata', val)
      },
      del (val) {
        this.$emit('del', val)
      }
    },
    computed: {
      tableDataThis () {
        return this.tableData
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .schedule-table
    .schedule-expend
      clear both
      min-height 75px
      margin-bottom 5px
      padding-top 10px
      border-bottom 1px dotted #ccc
    .schedule-expend-div
      width calc(100% - 100px)
      float left
    .el-item
      padding-right 20px
    .updata
      cursor pointer
    .del
      color $c-pink
      cursor pointer
</style>
